<template>
    <div id="types-main">
        <h3>保险产品列表</h3>
        <div class="type-btn">
            <div class="search">
                <el-select v-model="searchVal.type" placeholder="请选择">
                    <el-option
                        v-for="item in searchType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                <el-input
                    class="seacrchInput"
                    placeholder="请输入搜索内容"
                    v-model.lazy="searchVal.value"
                    clearable
                >
                </el-input>
            </div>
            <div id="dialog">
                <el-button type="success" @click="addDialog = true"
                    >新增保险产品</el-button
                >
            </div>
        </div>
        <el-table :data="insuresArr" border stripe style="width: 100%">
            <el-table-column prop="_id" label="产品编号" width="220px">
            </el-table-column>
            <el-table-column prop="name" label="产品名称" width="200px"> </el-table-column>
            <el-table-column prop="typesId.name" label="保险分类">
            </el-table-column>
            <el-table-column prop="payType" label="缴费类型"> </el-table-column>
            <el-table-column prop="suitableFor" label="适用人群">
            </el-table-column>
            <el-table-column prop="renew" label="可否续保">
                <template slot-scope="scope">
                    {{ scope.row.renew ? "可续保" : "不可续保" }}
                </template>
            </el-table-column>
            <el-table-column label="保单形式" width="180px">
                <template slot-scope="scope" >
                    <el-tag size="medium" v-for="item in scope.row.policy" :key="item">{{ item }}</el-tag>
                    <!-- {{ scope.row.policy.join(" / ") }} -->
                </template>
            </el-table-column>
            <el-table-column prop="price" label="保费"> </el-table-column>
            <el-table-column label="操作" width="150px">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="updateDialogFun(scope.row._id)"
                        >编辑</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="open(scope.row._id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="changePageSize"
            @current-change="changeCurrentPage"
            :current-page="currentPage"
            :page-sizes="[3, 5, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
        <!-- 弹窗区 -->
        <el-dialog
            title="新增产品"
            :visible.sync="addDialog"
            width="30%"
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <InsuresAdd
                :typeArr="typeArr"
                @changeAddDialog="changeAddDialog"
            ></InsuresAdd>
        </el-dialog>
        <el-dialog
            title="修改产品"
            :visible.sync="updateDialog"
            width="30%"
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <InsuresUpdate :typeArr="typeArr" @changeUpdateDialog="changeUpdateDialog"></InsuresUpdate>
        </el-dialog>
    </div>
</template>

<script>
import InsuresAdd from "./InsuresAdd.vue";
import InsuresUpdate from "./InsuresUpdate.vue";
import { createNamespacedHelpers } from "vuex";
const {
    mapState: mapStateType,
    mapActions: mapActionsType,
} = createNamespacedHelpers("types");
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "insures"
);
export default {
    components: {
        InsuresAdd,
        InsuresUpdate,
    },
    created() {
        this.getTypes();
        this.getInsures();
    },
    data() {
        return {
            addDialog: false,
            updateDialog: false,
            searchType: [
                { label: "保险名称", value: "name" },
                { label: "缴费类型", value: "payType" },
                { label: "适用人群", value: "suitableFor" },
                { label: "保单形式", value: "policy" },
                { label: "保费", value: "price" },
            ],
        };
    },
    computed: {
        ...mapStateType(["typeArr"]),
        ...mapState([
            "insuresArr",
            "searchVal",
            "total",
            "currentPage",
            "pageSize",
        ]),
    },
    methods: {
        ...mapActionsType(["getTypes"]),
        ...mapActions(["getInsures",'delInsureById','getInsureById']),
        ...mapMutations([
            "changeSearchVal",
            "changeCurrentPage",
            "changePageSize",
        ]),
        handleClose(done) {
            done();
        },
        changeAddDialog() {
            this.addDialog = false;
        },
        changeUpdateDialog() {
            this.updateDialog = false;
        },
        //修改弹窗
        updateDialogFun(_id) {
            this.updateDialog = true;
            this.getInsureById({ _id });
        },
        //删除提示框
        open(_id) {
            this.$confirm("此操作将永久删除该产品, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data } = await this.delInsureById({ _id });
                    if (data.status) {
                        this.$message({
                            type: "success",
                            message: "保险产品删除成功",
                        });
                        this.getInsures();
                    } else {
                        this.$message({
                            type: "info",
                            message: "保险产品删除失败",
                        });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    },
    watch: {
        //深度监听搜索条件
        searchVal: {
            handler(val) {
                this.changeSearchVal(val);
                this.getInsures();
            },
            deep: true,
        },
        //监听 当前页
        currentPage() {
            this.getInsures();
        },
        //监听 每页显示条数
        pageSize() {
            this.getInsures();
        },
    },
};
</script>

<style lang="scss">
@import "~@/css/type.scss";
</style>